<script lang="ts">
import { defineComponent, ref, toRefs, watch } from 'vue';

interface IThemeItem {
  label: string;
  value: string;
  image: string;
  color?: string;
  active?: boolean;
};

export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: 'infinity-theme'
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { modelValue } = toRefs(props);

    const themeData = ref<Array<IThemeItem>>([
      {
        label: '无限',
        value: 'infinity-theme',
        image: '',
        color: 'rgb(37, 43, 58)',
        active: true,
      },
      {
        label: '蜜糖',
        value: 'sweet-theme',
        image: '',
      },
      {
        label: '紫罗兰',
        value: 'provence-theme',
        image: '',
      },
      {
        label: '深邃夜空',
        value: 'deep-theme',
        image: '',
      },
      {
        label: '追光',
        value: 'galaxy-theme',
        image: '',
      },
    ]);

    const initActiveTheme = (theme: string) => {
      themeData.value.forEach((item: IThemeItem) => {
        item.active = false;

        if (item.value === theme) {
          item.active = true;
        }
      });
    }

    initActiveTheme(modelValue.value);

    watch(modelValue, (newVal) => {
      initActiveTheme(newVal);
    });

    const changeTheme = (theme: string) => {
      emit('update:modelValue', theme);
    };

    return {
      themeData,
      changeTheme,
    }
  }
});
</script>

<template>
  <d-dropdown :position="['bottom-end', 'top-end']" align="end">
    <svg class="icon-theme" viewBox="0 0 1024 1024" width="16" height="16">
      <path fill="var(--devui-text)" d="M512 96C229.696 96 0 325.696 0 608c0 90.368 30.304 174.496 85.344 236.896 55.264 62.624 129.152 97.12 208.128 97.12 81.568 0 161.536-36.832 231.264-106.592l2.272-2.496c65.792-81.472 132.896-121.056 205.088-121.056 46.72 0 89.216 15.872 126.688 29.92 30.336 11.328 56.576 21.12 81.216 21.12C1024 762.912 1024 654.336 1024 608c0-282.304-229.696-512-512-512z m428 602.912c-13.088 0-35.296-8.288-58.784-17.088-40.48-15.136-90.848-33.952-149.12-33.952-92.352 0-175.328 46.944-253.76 143.456-57.184 56.704-121.056 86.688-184.832 86.688-60.352 0-117.216-26.784-160.128-75.456C88.64 751.872 64 682.784 64 608 64 360.96 264.96 160 512 160s448 200.96 448 448c0 27.328-1.952 90.912-20 90.912z m-203.296-182.848a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-343.68-202.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m215.68 26.688a64 64 0 1 0 128 0 64 64 0 1 0-128 0z m-381.312 112a64 64 0 1 0 128 0 64 64 0 1 0-128 0zM182.4 698.752a96 96 0 1 0 192 0 96 96 0 1 0-192 0z"></path>
    </svg>
    <template #menu>
      <div class="theme-picker__dropdown-menu">
        <div
          v-for="themeItem of themeData"
          :key="themeItem.value"
          class="extend-theme-image"
          :style="{
            backgroundImage: `url(${themeItem.image})`
          }"
          @click="changeTheme(themeItem.value)"
        >
          <span class="extend-theme-title" :style="{color: themeItem.color}">{{themeItem.label}}</span><i v-if="themeItem.active" class="icon-right active-theme"></i>
        </div>
      </div>
    </template>
  </d-dropdown>
</template>

<style scoped lang="scss">
@import '@devui/styles-var/devui-var';

.theme-picker__dropdown-menu {
  width: 176px;
  margin: 12px 16px;
}

.extend-theme-image {
  background-repeat: no-repeat;
  height: 40px;
  margin-bottom: 8px;
  border-radius: $devui-border-radius;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;

  &:last-child {
    margin-bottom: 0;
  }

  .extend-theme-title {
    margin: 0 8px;
    color: $devui-light-text;
  }

  .active-theme {
    color: $devui-light-text;
    margin-right: 8px;
    background-color: $devui-brand;
    border-radius: 50%;
    opacity: .6;
    padding: 4px;
  }
}

.icon-theme:hover {
  path {
    fill: $devui-brand;
  }
}
</style>
